import Taro, {Component, Config} from "@tarojs/taro";
import {View, ScrollView, Image, Text} from "@tarojs/components";
import {toJS} from "mobx";
import {IStoreProps} from '../../store/Stores'
import {inject, observer} from '@tarojs/mobx'
import {getRuntime,numPartOf} from '../../utils/common'

import './mall.less'

import none_address from "../../assets/img/none_address.png";
import select_icon_on from "../../assets/img/icon_64_on.png";
import select_icon from "../../assets/img/icon_64.png";

// 收货地址
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Company extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    address: [],
    currentAddressId: null, // 默认为用户设置的默认地址
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({title: '收货地址'})
    this.getUserAddresses()
  }

  componentDidShow(): void {
    this.getUserAddresses()
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  getUserAddresses() {
    let { userStore } = this.props.stores
    let currentAddressId
    userStore.getUserAddresses({
      callback: res => {
        let resArr = toJS(res.items)
        console.log(resArr)
        // 设置默认选中地址，首先看有没有用户选择的地址，然后是为用户设置的默认地址
        let uesrSelectAddress = getRuntime().getStorage('userSelectAddress') || null
        if(uesrSelectAddress){
          console.log(uesrSelectAddress)
          currentAddressId =uesrSelectAddress.id
        }else {
          // 缓存地址信息用于编辑、订单选择地址
          resArr.map(item => {
            if(item.isDefault){
              currentAddressId = item.id
            }
          })
        }
        this.setState({
          currentAddressId,
          address: resArr
        })
        getRuntime().setStorage('userAddress',resArr)
      }
    })
  }

  // 用户选择地址，缓存用户选择地址用于下单
  changeCurrentAddressId(item:object){
    this.setState({
      currentAddressId: item.id
    })
    getRuntime().setStorage('userSelectAddress', item)
    // 返回下单页
    getRuntime().navigateBack()
  }

  render() {
    let {address,currentAddressId} = this.state
    return (
      <View>
        {address.length > 0 &&
        <View className='address-list'>
          {
            address.map(item => {
              return(
                <View className='item-address' key={item.id} >
                  <View onClick={this.changeCurrentAddressId.bind(this,item)}>
                    {item.id===currentAddressId&& <Image className='select-icon' src={select_icon_on} />}
                    {item.id!==currentAddressId&& <Image className='select-icon' src={select_icon} />}
                  </View>
                  <View className='info'>
                    <View className='line'>
                      <View className='name'>{item.receiver}</View>
                      <View className='tel'>{numPartOf(item.receiverPhone)}</View>
                    </View>
                    <View className='line'>
                      <View className='desc'>{item.receiverAddress}</View>
                      <View className='btn-edit' onClick={this.handelRouter.bind(this,'/pages/user/address_edit?id='+item.id)}>编辑</View>
                    </View>
                  </View>
                </View>
              )
            })
          }
        </View>
        }
        {address.length <= 0 &&
        <View className='my-card_none'>
            <View className='none-info'>
                <Image className='none-icon' src={none_address}/>
                <Text className='none-title list-desc'>还没有添加收货地址哦~</Text>
            </View>
        </View>
        }
        <View className='page-submit' onClick={this.handelRouter.bind(this, '/pages/user/address_add')}>+ 添加收货地址</View>
      </View>
    )
  }
}

export default Company
